<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>群星网约车 - 展示当前位置</title>
  <!-- 引入百度地图API -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=rXA8iQy9OhoIKkZEjWbO0xJR5c40gDcg"></script>
  <!-- 引入 Element UI 的样式 -->
  <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
  <!-- 引入 Vue.js 和 Element UI 库 -->
  <script src="../js/vue.js"></script>
  <script src="../element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
  <el-container>
    <!-- 头部标题 -->
    <el-header style="background-color: #007bff; color: #fff; text-align: center; padding: 20px;">
      <h1>展示当前位置</h1>
    </el-header>
    <!-- 内容区域 -->
    <el-main style="padding: 20px;">
      <div class="map-container">
        <div id="map"></div>
      </div>
    </el-main>
  </el-container>
</div>

<style>
  /* 页面样式 */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }

  .map-container {
    margin: 0 auto;
    width: 80%;
    max-width: 1200px;
  }

  #map {
    width: 100%;
    height: 500px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>

<script>
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data() {
      return {}
    },
    mounted() {
      // 初始化地图
      var map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 默认北京市中心坐标，并设置缩放级别

      // 获取当前位置
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
        } else {
          alert('failed' + this.getStatus());
        }
      }, {enableHighAccuracy: true});
    }
  });
</script>
</body>
</html>
